<template>
  <u-popup
    :show="show"
    mode="center"
    bgColor="transparent"
    :closeable="false"
    :safeAreaInsetBottom="false"
    @close="handleClose"
  >
    <view class="update-dialog">
      <view class="bg">
        <image
          style="width: 100%; height: 652rpx"
          :src="IMAGE_URL+'/static/master/ver-bg.png'"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center">
        <image
          style="width: 180rpx; height: 190rpx"
          :src="IMAGE_URL+'/static/master/ver-ico.png'"
          mode="aspectFill"
        />
        <view>
          <view class="dialog-title">发现新版本</view>
          <view class="version-number">{{ version }}</view>
        </view>

        <view class="update-description">
          {{ description }}
        </view>

        <view class="button-group">
          <button class="btn btn-cancel" @click="handleCancel">取消</button>
          <button class="btn btn-upgrade" @click="handleUpgrade">升级</button>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import appConfig from "@/config/app.js";
//  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  name: "UpdatePopup",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    version: {
      type: String,
      default: "V1.0.12",
    },
    description: {
      type: String,
      default: "我们优化了多项功能，快来下载新版本试试吧！",
    },
  },
  data() {
    return {
      // 可以添加组件内部状态
      IMAGE_URL: appConfig.IMAGE_URL,
    };
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit("close");
    },

    // 取消更新
    handleCancel() {
      this.$emit("cancel");
      this.handleClose();
    },

    // 立即升级
    handleUpgrade() {
      this.$emit("upgrade");
      // 这里可以添加升级逻辑，比如跳转下载页面
      this.handleDownload();
    },

    // 模拟下载逻辑
    handleDownload() {
      uni.showLoading({
        title: "准备下载...",
      });

      // 模拟下载过程
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: "开始下载新版本",
          icon: "success",
        });

        // 实际项目中这里会调用下载API
        // 例如：uni.downloadFile()
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.update-dialog {
  width: 580rpx;
  height: 652rpx;
  border-radius: 16rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .bg {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
.center {
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  padding: 40rpx 48rpx;
}

.dialog-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
  line-height: 1.2;
  margin-top: 20rpx;
}

.version-number {
  font-size: 24rpx;
  text-align: center;
  color: #999999;
  font-weight: 500;
  margin-bottom: 30rpx;
}

.update-description {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 40rpx;
  padding: 0 20rpx;
  text-align: center;
}

.button-group {
  display: flex;
  gap: 20rpx;
  justify-content: center;
}

.btn {
  border: none;

  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
  transition: all 0.3s ease;
  width: 228rpx;
  height: 76rpx;
  line-height: 76rpx;
  text-align: center;

  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(223, 152, 36, 0.1);
  border-radius: 60rpx 60rpx 60rpx 60rpx;
  &::after {
    border: none;
  }
}

.btn-cancel {
  background: linear-gradient(90deg, #df9824 0%, #f4b042 100%);
  color: #ffffff;
  &:active {
    background: linear-gradient(90deg, #df9824 0%, #f4b042 100%);
    transform: translateY(1rpx);
  }
}

.btn-upgrade {
  background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
  color: #ffffff;

  &:active {
    background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
    transform: translateY(1rpx);
  }
}
</style>
